<template>
  <div class="flex-grow flex flex-col items-center justify-center p-4">
    <!-- 404错误页面容器 -->
    <div class="max-w-4xl w-full mx-auto text-center">
      <!-- 装饰性背景元素 -->
      <div class="absolute inset-0 overflow-hidden -z-10">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-accent/5 rounded-full blur-3xl"></div>
      </div>

      <!-- 404数字显示 -->
      <div class="relative mb-8">
        <div class="text-[clamp(8rem,20vw,16rem)] font-bold text-gray-100 relative">
          404
          <div class="absolute inset-0 flex items-center justify-center">
            <i class="fa fa-exclamation-triangle text-[clamp(3rem,8vw,6rem)] text-primary/20 animate-float"></i>
          </div>
        </div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[clamp(2rem,5vw,4rem)] font-bold text-gray-800">
          404
        </div>
      </div>

      <!-- 错误信息 -->
      <div class="mb-10">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-4">页面未找到</h2>
        <p class="text-gray-600 text-lg max-w-2xl mx-auto">
          抱歉，您访问的页面不存在或已被移除。可能是链接错误或页面已更改。
        </p>
      </div>

      <!-- 搜索框 -->
      <div class="max-w-md mx-auto mb-10">
        <el-input
            v-model="searchQuery"
            placeholder="搜索内容..."
            class="mb-4"
            prefix-icon="Search"
            @keyup.enter="handleSearch"
        ></el-input>
        <el-button
            type="primary"
            class="w-full"
            @click="handleSearch"
        >
          <i class="fa fa-search mr-2"></i>搜索
        </el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <el-button
            type="primary"
            size="large"
            @click="goToHome"
            class="animate-pulse-slow"
        >
          <i class="fa fa-home mr-2"></i>返回首页
        </el-button>
        <el-button
            type="default"
            size="large"
            @click="goBack"
        >
          <i class="fa fa-arrow-left mr-2"></i>返回上一页
        </el-button>
      </div>

      <!-- 底部信息 -->
      <div class="mt-16 text-gray-500 text-sm">
        <p>如果您认为这是一个错误，请联系我们的客服团队</p>
        <el-button
            type="text"
            class="text-primary mt-2"
            @click="contactSupport"
        >
          <i class="fa fa-envelope mr-1"></i>联系客服
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElInput, ElButton, ElMessage } from 'element-plus';

// 搜索框数据
const searchQuery = ref<string>('');

/**
 * 跳转到首页
 */
const goToHome = (): void => {
  ElMessage.success('正在返回首页...');
  setTimeout(() => {
    window.location.href = '/';
  }, 800);
};

/**
 * 返回上一页
 */
const goBack = (): void => {
  if (window.history.length > 1) {
    window.history.back();
  } else {
    ElMessage.info('没有历史记录，将返回首页');
    setTimeout(() => {
      window.location.href = '/';
    }, 800);
  }
};

/**
 * 处理搜索功能
 */
const handleSearch = (): void => {
  const query = searchQuery.value.trim();
  if (query) {
    ElMessage.success(`正在搜索: ${query}`);
    // 实际应用中添加搜索逻辑
    // 例如: router.push(`/search?query=${encodeURIComponent(query)}`)
  } else {
    ElMessage.warning('请输入搜索内容');
  }
};

/**
 * 联系客服
 */
const contactSupport = (): void => {
  ElMessage.info('正在打开客服对话框...');
  // 实际应用中添加联系客服的逻辑
};
</script>

<style scoped>
/* 引入Tailwind工具类 */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* 确保样式正确应用 */
:deep(.el-button) {
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper) {
  transition: all 0.3s ease;
}
</style>
